<template>
  <div id="app">
    <div class="box">
      <div class="left">
        <p class="welcome">Welcome</p>
        <div class="form">
          <div class="user-input1">
            <el-input
              v-model="userName"
              placeholder="请输入用户账号"
              prefix-icon="el-icon-user"
            ></el-input>
          </div>

          <div class="user-input2">
            <el-input
              v-model="passWord"
              placeholder="请输入用户密码"
              prefix-icon="el-icon-key"
              show-password
            ></el-input>
          </div>
          <a @click="forgot" class="fp"> Forgot password? </a>

          <div class="user-btn">
            <el-button @click="login" type="primary">Login!</el-button>
          </div>
        </div>
      </div>
      <img class="fox" src="../assets/下载.svg" />

      <div class="right">
        <h1 class="back">Welcome back!</h1>
        <p class="log">
          Log in and use the oppotyunities offered by our portal.
        </p>
        <h2 class="acc">
          <br />
          You don't have an account?
        </h2>
        <button class="create">
          <a @click="register" href="JavaScript:">
            <h3>Create Account</h3>
          </a>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
// 会把login.vue组件导出到main.js，再根据router的规则来决定替换div标签下面的组件
export default {
  data() {
    //这里代表数据 页面上的数据
    return {
      userName: "",
      passWord: "",
    };
  },
  methods: {
    //登录功能函数
    login() {
      //因为页面是一个人单独写的，也需要做非空校验
      if (
        this.userName.trim() == "" ||
        this.userName == null ||
        this.userName == undefined
      ) {
        this.$message({
          message: "用户名不能为空",
          type: "warning",
        });
        return;
      }

      if (
        this.passWord.trim() == "" ||
        this.passWord == null ||
        this.passWord == undefined
      ) {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
        return;
      }
      //   1.创建一个formDate对象
      let formDate = new FormData();
      //            key=userName      value=data上userName的值
      formDate.append("userName", this.userName);
      formDate.append("passWord", this.passWord);

      //   这里该发送axios请求了
      this.$http
        .post("/user/login", formDate, {
          Headers: {
            //key-value形式的响应头
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          /**
           * 1.提示用户成功
           * 2.把用户的昵称 头像存起来
           * 3.跳转页面
           */
          this.$message({
            message: "登录成功",
            type: "success",
          });
          sessionStorage.setItem("id", res.data.data.id);
          sessionStorage.setItem("avatar", res.data.data.avatar);
          sessionStorage.setItem("nickName", res.data.data.nickName);
          //代码版路由跳转
          this.$router.push("/showindex");
        });
    },
    //注册功能函数
    register() {
      this.$router.push("/register");
    },
    forgot() {
      //覆盖原有的组件
      // this.$router.push("/confirmemail");
      window.open("/#/confirmemail", "_blank");
    },
  },
};
</script>
<style scoped>
/* vue项目希望一个组件写组件标签+组件的JavaScript代码+组件样式
    scoped代表这个样式只在这个界面起效果
    */
#app {
  background-color: #ffd1b7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  position: relative;
  border-bottom: 3px solid #fb966f;
  border-right: 3px solid #fb966f;
  background-color: #ffd1b7;
  height: 400px;
  width: 700px;
  box-shadow: 10px 10px 6px 2px rgb(251 150 108 / 60%);
  overflow: hidden;
}
.left {
  position: relative;
  background-color: #fee4d4;
  height: 400px;
  width: 350px;
}

.welcome {
  position: absolute;
  color: #302825;
  left: 30%;
  top: 25%;
  font-weight: bolder;
  font-size: xx-large;
}

.user-input1 {
  position: absolute;
  top: 35%;
  left: 20%;
  margin: 12px;
}
.user-input2 {
  position: absolute;
  top: 50%;
  left: 20%;
  margin: 12px;
}
.el-input {
  font-size: 12px;
  width: 221px;
}
.fp {
  position: absolute;
  top: 68%;
  left: 20%;
  font-size: 15px;
  margin: 12px;
  color: #707e8d;
  font-size: small;
}
.fp:hover {
  cursor: pointer;
  color: #f45f34;
  text-decoration: underline;
}
.user-btn {
  position: absolute;
  width: 80px;
  top: 72%;
  right: 15%;
}
.user-btn a:hover {
  color: #f45f34;
}
/* label {
  color: #707e8d;
  font-size: small;
} */

.fox {
  position: absolute;
  top: 25%;
  left: 55%;
  height: 18%;
}

.back {
  position: absolute;
  top: 44%;
  left: 56%;
  font-size: 20px;
}

.log {
  position: absolute;
  top: 50%;
  left: 56%;
  font-size: 14px;
}

.acc {
  position: absolute;
  top: 62%;
  left: 56%;
  font-size: 15px;
}

.create {
  position: absolute;
  top: 74%;
  left: 56%;
  background: #fb966f;
  border-radius: 5px;
  border: none;
}

h3 {
  font-size: 14px;
  color: #f45f34;
  padding: 5px;
}
</style>